<template>
    <div class="accountPage">
      <input
        v-model="form.username"
        placeholder="请输入用户名"
        placeholder-class="account-holder"
        @input=""
        class="account"
      />
      <input
        v-model="form.email"
        placeholder="请输入电子邮箱"
        placeholder-class="account-holder"
        @input=""
        class="email"
      />
      <div class="password-box">
        <input
          :type="showPassword? 'text' : 'password'"
          v-model="form.password"
          placeholder="请输入密码"
          placeholder-class="password-holder"
          class="password"
        />
        <span class="eye-close" @click="showPassword =!showPassword"
        :class="{ active: showPassword }"></span>
      </div>
      <div class="func-box">
        <el-checkbox v-model="remember" label="记住我" size="small" />
        <div class="forget">忘记密码?</div>
      </div>
      <el-button color="#5784FF" class="button" @click="logIn">登录</el-button>
      <div class="register">
        <div>没有账户?</div>
        <div style="color: #5784FF;">立即注册</div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { reqLoginIn } from '@/apis/login'
import { useRouter } from 'vue-router'
import {ref} from 'vue'
import { useLoginStore } from '@/stores/login'
import { ElMessage } from 'element-plus/es/components/index.mjs'
const router = useRouter()
const loginStore = useLoginStore()
let form = ref({
  username: '',
  password: '',
  email: ''
})
let showPassword = ref(false)
let remember = ref(false)
async function logIn(){
  try{
    const res = await reqLoginIn(form.value)
    console.log(res)
    loginStore.login()
    router.push('/')
    ElMessage({
      message: '登录成功!',
      type: 'success'
    })
  }catch(error){
      ElMessage.error('登录失败')
      console.log('登录失败',error)
  }
}
</script>

<style scoped lang="less">
@import url('@/views/login/accoutView/default.less');
</style>